<template>
  <div class="app-container">
    <a-card size="small" :bordered="false" class="box-card">
      <LeTodoList  />
    </a-card>
    <a-card size="small" :bordered="false" class="box-card marginTop12">
      <template #title>
        <header class="titleHeader">
          <div class="titleLeft">全部游戏
            <ExclamationCircleOutlined />
          </div>
        </header>
      </template>
      <div class="seach-content">
        <a-row>
          <a-col :xs="5" :xl="5" class="search_content">
            <div class="search_lable">游戏ID</div>
            <a-input size="small" v-model:value="id" allowClear placeholder="请输入游戏ID" class="search_input"/>
          </a-col>
          <a-col :xs="5" :xl="5" class="search_content">
            <div class="search_lable">游戏名称</div>
            <a-input size="small" v-model:value="name" allowClear type="text" placeholder="请输入游戏名称" class="search_input"/>
          </a-col>
          <a-col :xs="5" :xl="5" class="search_content">
            <div class="search_lable">游戏包名</div>
            <a-input size="small" v-model:value="packName" allowClear type="text" placeholder="请输入游戏包名" class="search_input"/>
          </a-col>
          <a-col :xs="5" :xl="5" class="search_content">
            <div class="search_lable">审核状态</div>
            <a-select
            ref="select"
            allowClear 
            class="search_input"
            v-model:value="auditStatus"
            placeholder="请选择审核状态"
            :options="selectTable"
            @change="handleChange"
            ></a-select>
          </a-col>
          <a-col :xs="4" :xl="4" class="search_content">
            <a-button class="search_Button confirm" type="primary" @click="search">确定</a-button>
            <a-button class="search_Button search_Button_reset button_cancel_hover" @click="reset">重置</a-button>
          </a-col>
        </a-row>
      </div>
      <div class="table_content">
        <a-table :columns="columns"
          :data-source="data"
          @resizeColumn="handleResizeColumn"
          :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          :locale="localeObj"
          >
          <template #headerCell="{ column }">
            <template v-if="column.key === 'name'">
                <span>
                <smile-outlined />
                Name
              </span>
            </template>
          </template>
          <template #bodyCell="{ column,record }">
            <!-- <template v-if="column.key === 'name'">
              <a>
                {{ record.name }}
              </a>
            </template> -->
            <div v-if="column.key === 'status'" class="geme_status">
              <span v-if="record.status===1" class="geme_status_gray">待上线</span>
              <span v-else-if="record.status===3" class="geme_status_color">已上线</span>
              <span v-else-if="record.status===4" class="geme_status_out">已下架</span>
              <span v-else-if="record.status ===2" >-</span>
            </div>
            <div v-if="column.key === 'onlineTime'">
              <span v-if="record.onlineTime">{{record.onlineTime}}</span>
              <span v-else>-</span>
            </div>
            <template v-if="column.key === 'tags'">
              <a-tag v-if="record.status===1" :bordered="false" color="default">未发布</a-tag>
              <a-tag v-else-if="record.status===3" :bordered="false" color="green">审核完成</a-tag>
              <a-tag v-else-if="record.status===4" :bordered="false" color="error">审核失败</a-tag>
              <a-tag v-else-if="record.status ===2" :bordered="false" color="warning">审核中</a-tag>
            </template>
            <template v-else-if="column.key === 'action'">
              <span class="action">
                <a-button class="action" value="small" type="text" @click="doAction('add',record)">添加安装包</a-button>
                <!-- <a-divider type="vertical" /> -->
                <a-button class="action" size="small" type="text">还原</a-button>
                <!-- <a-divider type="vertical" /> -->
                <a-button class="action" size="small" type="text">剩余时间</a-button>
                <!-- <a-divider type="vertical" /> -->
                <a-button class="action" size="small" type="text">查看</a-button>
                <!-- <a-divider type="vertical" /> -->
                <a-button class="action" size="small" type="text">失败原因</a-button>
                <!-- <a-divider type="vertical" /> -->
                <a-button class="action" size="small" type="text" @click="doAction('delete',record)">删除</a-button>
                <!-- <a-divider type="vertical" /> -->
                <a-button class="action" size="small" type="text" :loading="state.loading" @click="doAction('update',record)">更新</a-button>
                <!-- <a-divider type="vertical" /> -->
                <a-button class="action" size="small" type="text" @click="doAction('applyForRemoval',record)">申请下架</a-button>
                <!-- <a-divider type="vertical" /> -->
                <a-button size="small" type="text" class="action">撤回
                  <!-- <down-outlined /> -->
                </a-button>
              </span>
            </template>
          </template>
          <!-- <a-config-provider >
            <template #emptyText>
              <div style="text-align: center">
                <img src="../../assets/images/img-default @2x.png" alt="">
                <p>暂无数据</p>
              </div>
            </template>
          </a-config-provider> -->
        </a-table>
      </div>
    </a-card>
    <a-modal v-model:open="applyForRemovalModal" 
      class="applyForRemovalModal"
      style="
      /* background: #FFFFFF; */
      padding:0 25px;
      height: 635px;
      width: 1200px;
      box-shadow: 1px 3 8px 2px rgba(0,0,0,0.08);
      border-radius: 2px 2px 2px 2px;"
      title="申请下架"
      @ok="handleOk"
      >
      <p>本开放平台支持开发者自行申请下架应用，如应用出现问题，可根据实际情况提交下架申请。</p>
      <a-form
          ref="formRef"
          :model="formState"
          :rules="rules"
          layout="vertical"
        >
        <a-form-item label="下架方式" name="way">
          <a-radio-group v-model:value="formState.way">
            <a-radio value="1">仅下架该版本</a-radio>
            <a-radio value="2">下架该游戏</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="原因描述" name="cause">
          <a-textarea v-model:value="formState.cause" placeholder="请具体描述下架原因（如：①应用不再维护 ②应用更换包名 ③上架版本出现BUG，需暂时下架修复 ④上架版本出现BUG，需回退版本 ⑤其他原因）"/>
        </a-form-item>
        <a-form-item label="上传截图(格式必须为JPG或PNG)">
          <a-upload  v-model:fileList="formState.screenshot" list-type="picture-card" :max-count="1">
                <div v-if="formState.screenshot.length <1">
                  <PlusOutlined :style="{fontSize: '32px', color: 'rgba(222, 222, 222, 1)'}"/>
                </div>
              </a-upload>
        </a-form-item>
        <div class="form_tips">
          <i class="tips"> 
            <img src="../../assets/icon/icon.png" alt="" class="imgs">温馨提示</i><br>
          <i>① 提交成功后，游戏自动下架，无需审核等待。</i><br>
          <i>② 若线上版本存在短期无法解决的严重BUG，但旧版本可正常使用，建议申请[仅下架该版本]，系统将自动回退到旧版本，确保新用户能下载到可用的版本。同时，建议开发者及时更新，保证老用户不再因为BUG影响正常使用。
          </i>
        </div>
      </a-form>
      <template #footer>
        <a-form-item
          style="text-align: center"
        >
          <a-button htmlType="submit" style="margin-right: 16px; background-color: rgba(76, 200, 126, 1);border-radius: 2px 2px 2px 2px;" type="primary" @click="handleOk">提 交</a-button>
          <a-button class="button_cancel_hover" style="margin-left: 8px;border-radius: 2px 2px 2px 2px;;" @click="handleCancel">取 消</a-button>
        </a-form-item>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import { reactive, ref,toRaw,h } from 'vue';
import LeTodoList from "@/components/tolist/index.vue";
import { ExclamationCircleOutlined,PlusOutlined } from '@ant-design/icons-vue';
import { createVNode } from 'vue';
import { Modal,Empty  } from 'ant-design-vue';

const expand = ref(false);
// const localeObj =ref('')
// const localeObj= {
//   emptyText: h(Empty, {
//     description: '请您修改订阅信息，来精准匹配您的项目',
//     // image: Empty.PRESENTED_IMAGE_SIMPLE,
//     imageStyle: { height: '60px' },
//   }),
// }
const localeObj = {

emptyText: h(Empty, {
  description: "暂无数据",
  // image: Empty.PRESENTED_IMAGE_SIMPLE,
  imageStyle: { height: '60px' },
}),

};
// search
const id = ref('');
const name = ref('');
const packName = ref('');
const auditStatus = ref([]);
const selectTable = ref([
  {
    value: 'jack',
    label: 'Jack',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
  {
    value: 'disabled',
    label: 'Disabled',
    disabled: true,
  },
  {
    value: 'yiminghe',
    label: 'Yiminghe',
  },
]);
const search =() =>{
  console.log(id.value,name.value,packName.value,auditStatus.value,11111);
}
const reset =()=>{
  id.value='',
  name.value='',
  packName.value='',
  auditStatus.value=[]
}
const handleChange = value => {
  console.log(`selected ${value}`);
  search()
};
// 表格
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
    status:1
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
    status:2,
    onlineTime:'2023/07/10 08:00:00'
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
    status:3
  },
  {
    key: '4',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
    status:4
  },
  {
    key: '4',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
    status:4
  },
];
const columns = ref([
{
    title: '序号',
    dataIndex: 'key', 
    render: (value, record, index) => {
      return index + 1; // 使用行号
    },
    width: 80,
  },
  {
    dataIndex: 'name',
    key: 'name',
    resizable: true,
    width: 150,
    align:'center'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    resizable: true,
    width: 100,
    minWidth: 100,
    maxWidth: 200,
    align:'center'
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    align:'center'
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    align:'center'
  },
  {
    title: '上线时间',
    key: 'onlineTime',
    dataIndex: 'onlineTime',
    align:'center',
    width: 180,
  },
  {
    title: '游戏状态',
    key: 'status',
    dataIndex: 'status',
    align:'center',
    width: 100,
  },
  {
    title: 'Action',
    key: 'action',
    align:'center'
  },
]);
function handleResizeColumn(w, col) {
  col.width = w;
}
const state = reactive({
  // selectedRowKeys: [],
  // Check here to configure the default column
  loading: false,
});
const applyForRemovalModal = ref(false);
const handleOk = ()=>{
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formState, toRaw(formState)
    );
      applyForRemovalModal.value = false
      // formRef.value.resetFields();
      // formState.screenshot =[]
    })
    .catch(error => {
      console.log('error', error);
    });
  console.log(111,'addM');
}
const handleCancel =()=>{
  applyForRemovalModal.value = false
  formRef.value.resetFields();
}
const doAction = (e,record) => {
  console.log(111,'start');
  console.log(e,'e');
  console.log(record,'record');
  if(e ==='applyForRemoval'){
    console.log(1111,'applyForRemoval');
    applyForRemovalModal.value =true
    // formRef.value.resetFields();
    // formState.screenshot =[]
  }else if(e ==='update'){
    state.loading = true;
    // ajax request after empty completing
    setTimeout(() => {
      state.loading = false;
      // state.selectedRowKeys = [];
    }, 1000);
  }else if(e ==='delete'){
    Modal.confirm({
    title: '确定要删除此条数据?',
    icon: createVNode(ExclamationCircleOutlined),
    content: `Some descriptions + ${record.age }`,
    okText: 'Yes',
    okType: 'danger',
    cancelText: 'No',
    onOk() {
      console.log('OK',record);
      // formRef.value
      // .validate()
      // .then(() => {
      //   console.log('values', formState, toRaw(formState));
      //   applyForRemovalModal.value = false
      // })
      // .catch(error => {
      //   console.log('error', error);
      // });
    },
    onCancel() {
      console.log('Cancel');
    },
  });
  }
};
// modal 下架
const formRef = ref();
const formState = reactive({
  way:'',
  cause:'',
  screenshot: [],
});
const rules = {
   way: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  cause: [
    {
      required: true,
      message: 'Please input activity form',
      trigger: 'blur',
    },
  ],
};

// 分页
</script>
<style lang="less" scoped>
@import url('./index.less');
</style>